<template>
  <div>
    <el-dialog
      v-dialogDrag
      ref="dragerrDialog"
      :before-close="closed"
      :close-on-click-modal="false"
      custom-class="dragdialogClass"
      width="780px"
      :modal="false"
      title="节目错误信息列表"
      :visible.sync="innerVisible"
      append-to-body>
      <el-row :gutter="10">
        <el-col>
          <!-- 列表区域 -->
          <div>
            <el-table
              height="50vh"
              ref="mattable"
              highlight-current-row
              @current-change="rowsCurrentChange"
              v-loading="loading"
              lazy
              :data="errorList"
              border
              stripe
              style="width: 100%;">
              <el-table-column prop="index" label="节目序号" width="80px" sortable="custom"></el-table-column>
              <el-table-column prop="level" show-overflow-tooltip label="级别" width="120" sortable="custom">
                <template v-slot="scope">
                  <span class="is-warning" v-if="scope.row.level === 'warning'"><i class="el-icon-warning"></i>警告</span>
                  <span class="is-error" v-else><i class="el-icon-error"></i>错误</span>
                </template>
              </el-table-column>
              <el-table-column prop="msg" label="信息" sortable="custom" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import commonMethods from '@/utils/commonMethods.js'
export default {
  name: 'matdialog',
  mixins: [commonMethods],
  watch: {
    innerVisible(newV) {
      if (newV) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.addClass(this.$refs.dragerrDialog.$el, 'el-dialog__parent')
          }, 500)
        }, 50)
      }
    },
    'listsData' () {
      this.$nextTick(() => { // 再拖动结束视图更新后，立即对列表序号进行重新排序。
        this.listsData.map((item, index) => {
          // 列表重新计算播出时间
          if (index !== 0) {
            this.$set(item, 's_time', this.listsData[index - 1].s_time + this.listsData[index - 1].pgm_len)
          } else {
            this.$set(item, 's_time', this.scopeRow.s_time)
          }
        })
      })
    }
  },
  data() {
    return {
      rowscurrent: null,
      loading: false
    }
  },
  props: {
    innerVisible: {
      type: Boolean,
      default: false
    },
    errorList: {
      type: Array,
      default: null
    }
  },
  created() {},
  mounted() {},
  methods: {
    closed() {
      this.$emit('update:innerVisible', false)
    },
    rowsCurrentChange(rows) {
      this.rowscurrent = rows
      this.$emit('rowscheck', rows)
      console.log(rows)
    }
  }
}
</script>

<style>
.zdyrelative .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
.is-warning { color: #c18922;}
.is-error { color: #dc1b1b;}
</style>
